<template>
  <div class="container">
    <!--      题目属性-->
    <div class="container-property">
      <div class="container-property-time"></div>
      <div class="container-property-text">题目属性</div>
    </div>
    <!--    end-->
    <div class="container-form">
      <el-form :model="$store.state.exam.exam.tian" :rules="rules" ref="ruleForm" label-width="120px"
               class="demo-ruleForm">
        <div style="display: flex">
          <div>
            <el-form-item label="题目分数" prop="score">
              <el-input-number :min="0.5" :step="0.5" :max="100" clearable
                               v-model="$store.state.exam.exam.tian.score"></el-input-number>
            </el-form-item>
          </div>
          <div style="margin-left: 20px">
            <el-form-item label="题目显示名称" prop="show_type">
              <el-input clearable v-model="$store.state.exam.exam.tian.show_type"></el-input>
            </el-form-item>
          </div>
        </div>
        <div style="display: flex">
          <div>
            <el-form-item label="题目类型" prop="pattern">
              <el-radio v-model="$store.state.exam.exam.tian.pattern" label="作业">阶段测评</el-radio>
              <el-radio v-model="$store.state.exam.exam.tian.pattern" label="考试">综合测评</el-radio>
            </el-form-item>
          </div>
          <div style="margin-left: 20px">
            <el-form-item label="试卷/作业名称" prop="paper_name">
              <el-input clearable v-model="$store.state.exam.exam.tian.paper_name"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!--      题目属性-->
    <div class="container-property">
      <div class="container-property-time"></div>
      <div class="container-property-text">题目（题干内容）</div>
    </div>
    <!--    end-->

    <div class="container-title" id="edite">
      <div style="border: 1px solid #ccc;z-index: 9999">
        <!-- 工具栏 -->
        <Toolbar
          v-if="isEditer"
          style="border-bottom: 1px solid #ccc"
          :editorId="editorId"
          :defaultConfig="toolbarConfig"
        />
        <!-- 编辑器 -->
        <Editor
          v-if="isEditer"
          style="height: 200px;"
          :editorId="editorId"
          :defaultConfig="editorConfig"
          @onChange="onChange"
          :defaultHtml="defaultHtml"
        />
      </div>
    </div>


    <!--      题目属性-->
    <div class="container-property" style="margin-top: 20px;width: 500px">
      <div style="display: flex;align-items: center">
        <div class="container-property-time"></div>
        <div class="container-property-text">答案</div>
      </div>
      <div style="margin-left: 20px">
        <el-button @click="pushItem" type="primary" icon="el-icon-circle-plus" circle></el-button>
      </div>
    </div>
    <!--    end-->


    <!--    选项-->
    <div style="display: flex;flex-wrap: wrap">
      <div @mouseleave="onMouseLeave" @mouseenter="onMouseenter(index)" style="margin-left: 50px;"
           v-for="(item,index) in number" :key="index">
        <div class="container-select">
          <div>第{{ index + 1 }}空：</div>
          <div>
            <el-input
              type="textarea"
              autosize
              clearable
              placeholder="请输入内容"
              v-model="$store.state.exam.exam.tian.answer[index]">
            </el-input>
          </div>
          <div>
            <el-button v-if="index == isDel" style="margin-left: 10px" @click="delItem" type="danger"
                       icon="el-icon-delete" circle></el-button>
          </div>
        </div>
      </div>
    </div>

    <!--    end-->

    <!--    保存按钮-->
    <div class="container-button">
      <el-row>
        <el-button v-if="$store.state.exam.edit.type == 0 && $store.state.exam.edit.name == ''  " @click="onSubmit"
                   type="primary" round>
          保存/继续添加
        </el-button>
        <el-button v-if="$store.state.exam.edit.type == 0 && $store.state.exam.edit.name != '' " @click="onSubmit"
                   type="primary" round>
          更新/关闭
        </el-button>
        <el-button v-if="$store.state.exam.edit.type == 1 " @click="onSubmit"
                   type="primary" round>
          保存/返回
        </el-button>
        <el-button @click="onClose" type="info" round>{{
            $store.state.exam.edit.type == 0 ? '取消/关闭' : '取消/返回'
          }}
        </el-button>
      </el-row>
    </div>
    <!--    end-->

  </div>
</template>

<script>
export default {
  data() {
    return {
      isEditer: false,
      isDel: -1,//默认显示不显示删除按钮
      number: 1,//填空答案数量
      editorId: 'wangEditor-4', // 定义一个编辑器 id ，要求：全局唯一且不变。重要！！！
      latestContent: '', // 用于存储编辑器最新的内容，onChange 时修改
      toolbarConfig: {},
      defaultHtml: '',//内容
      editorConfig: {
        MENU_CONF: {//图片上传配置
          uploadImage: {
            fieldName: 'file',
            server: 'http://www.free.com/api/Upload/upload'
          }
        },
        placeholder: '请输入内容...',
      },
      ruleForm: {
        title: '',
        score: '2',
        show_type: '填空题',
        answer: [],
        paper_name: '',
        pattern: 0,
        type: '填空题'
      },
      rules: {
        score: [
          {required: true, message: '请输入题目分数', trigger: 'blur'},
        ],
        show_type: [
          {required: true, message: '请输入题目显示类型', trigger: 'blur'},
        ],
        pattern: [
          {required: true, message: '请选择题目类型', trigger: 'blur'},
        ],
        paper_name: [
          {required: true, message: '请输入题目归属名称', trigger: 'blur'},
        ],
      }
    }
  },
  watch: {
    "$store.state.exam.exam.tian": {
      handler: function (val) {
        this.isEditer = false;
        setTimeout(() => {
          this.defaultHtml = `<div>${val['title']}</div>`;
          this.isEditer = true;
        }, 0)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {

    onMouseLeave: function () {
      this.isDel = -1;
    },

    onMouseenter: function (index) {
      this.isDel = index;
    },
    //
    delItem: function () {
      if (this.number == 1) return this.$message.error("至少留一个");
      this.number--;
    },
    /**
     * 追加题目
     */
    pushItem: function () {
      this.number++;
    },

    onChange(editor) {
      //使用 editor.getHtml() 获取 HTML 内容。使用 editor.getText() 获取纯文本内容 使用 editor.children 获取 JSON 内容。
      this.latestContent = editor.getHtml()
    },
    onSubmit: function () {
      let _this = this;
      if (this.$store.state.exam.exam.tian.answer.length == 0) {
        this.$message.error('请输入题目正确答案');
        return;
      }
      if (this.$md(this.editorId).isEmpty()) {
        this.$message.error('请输入题目');
        return;
      }
      if (this.$store.state.exam.exam.tian.score == '') {
        this.$message.error('请选择题目的分数');
        return;
      }
      if (this.$store.state.exam.exam.tian.show_type == '') {
        this.$message.error('请输入题目显示类型');
        return;
      }
      if (this.$store.state.exam.exam.tian.pattern == null) {
        this.$message.error('请选择题目类型');
        return;
      }
      if (this.$store.state.exam.exam.tian.paper_name == '') {
        this.$message.error('请输入题目归属名称');
        return;
      }
      let obj = {
        title: _this.latestContent,
        score: _this.$store.state.exam.exam.tian['score'],
        pattern: _this.$store.state.exam.exam.tian['pattern'],
        paper_name: _this.$store.state.exam.exam.tian['paper_name'],
        show_type: _this.$store.state.exam.exam.tian['show_type'],
        type: _this.$store.state.exam.exam.tian['type'],
        answer: _this.$store.state.exam.exam.tian['answer'].join(),
      };
      //阅读提
      if (this.$store.state.exam.edit.type == 1) {
        if (this.$store.state.exam.readIndex == -1) {//添加
          this.$store.commit('exam/setReadList', obj);
        } else {//修改
          this.$store.commit('exam/setReadList', obj);
          this.$store.commit('exam/setReadIndex', -1);//初始化添加状态
        }
      }
      //end
      this.clearDate();
      this.$emit('onSubmit', obj)
    },

    clearDate: function () {
      this.ruleForm.answer = [];
      this.ruleForm.title = '';
      this.ruleForm.paper_name = this.$store.state.exam.exam.tian.paper_name
      this.ruleForm.pattern = this.$store.state.exam.exam.tian.pattern;
      this.$store.commit('exam/setTian', this.ruleForm);
      this.$md(this.editorId).clear();
    },
    onClose: function () {
      this.clearDate();
      this.$store.commit('exam/setReadIndex', -1);//初始化添加状态
      this.$emit('onClose');
    }
  },
  created() {
    this.number = this.$store.state.exam.exam.tian['answer'].length == 0 ? 1 : this.$store.state.exam.exam.tian['answer'].length;
    this.defaultHtml = `<div>${this.$store.state.exam.exam.tian['title']}</div>`;
  }

}
</script>

<style lang="scss">

.container {
  min-height: 500px;

  .container-property {
    width: 300px;
    display: flex;
    align-items: center;

    .container-property-time {
      width: 6px;
      height: 20px;
      background-color: #3a8ee6;
    }

    .container-property-text {
      margin-left: 10px;
      font-weight: bold;
      font-size: 18px;
      color: black;
    }
  }

  .container-form {
    margin-top: 10px;
  }

  .container-title {
    z-index: 9999;
    margin-top: 20px;
    margin-left: 50px;
  }

  .container-select {
    display: flex;
    margin-top: 20px;
    align-items: center;

    .container-select-item {
      font-weight: bold;
      font-size: 20px;
    }
  }

  .container-button {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
